<template>
	<view class="goodsList" v-if="hotGood.length>0">
		<view class="item" v-for="item,index in hotGood" :key="item.id" @click="goodsItem(item)">
			<view class="itemImg">
				<goods :src='item.image'></goods>
			</view>
			<view class="title ellipsis">
				{{item.name}}
			</view>
			<view class="price">
				￥{{ item.price }}
			</view>
			<view class="btnBox" v-if="!pageType">
				<image class="btnBg" src="/static/home/btn.png" mode=""></image>
				<view class="btn" @click.stop="watchVideo(index)">
					<text class=" tright">观看视频</text>
				</view>
				<view class="btn" @click.stop="goodsItem(item)">
					<text class=" tleft">立即购买</text>
				</view>
			</view>
			<!-- <view class="achievement" v-if="pageType">
				购买业绩：2000.00
			</view> -->
		</view>
	</view>
	<view class="more" v-else>
		暂无内容
	</view>
</template>
<script>
	import goods from "@/components/home/goodsList/goods/goods.vue"
	export default {
		name: "goodsList",
		components:{goods},
		props:{
			pageType:{
				type:Boolean,
				default:false,
			},
			hotGood:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				list: [{}],
				scrollTop:0
			};
		},
		created() {
			
		},
		methods:{
			watchVideo(e){
				if(!this.hotGood[e].video || this.hotGood[e].video==''){
					this.showToastMsg("该商品，暂无视频")
					return
				}
				uni.navigateTo({
					url:"/pages/index/watchVideo/watchVideo?index="+e+"&List="+JSON.stringify(this.hotGood)
				})
			},
			goodsItem(item){
				uni.navigateTo({
					url:"/pages/index/goods/goods?id="+item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>


	.goodsList {
		width: $connet-width;
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;

		.item {
			width: 335rpx;
			height: 530rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			position: relative;
			margin-bottom: 20rpx;
			.itemImg{
				width: 335rpx;
				height: 335rpx;
			}
			.title {
				color: $title-colcor;
				font-size: $uni-font-size-14;
				margin: 20rpx 20rpx 10rpx;
			}

			.price {
				color: $price-color ;
				font-size: $uni-font-size-14;
				font-weight: bold;
				margin-left:$submargin-width; 
			}

			.btnBox {
				margin: $submargin-width auto;
				width: 300rpx;
				height: 68rpx;
				position: relative;
				display: flex;

				.btnBg {
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: 1;
				}

				.btn {
					width: 50%;
					position: relative;
					z-index: 2;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 55rpx;
					overflow: hidden;

					text {
						width: 130rpx;
						float: right;
					}

					.tleft {
						float: left;
					}
				}
			}
			.achievement{
				font-size: $uni-font-size-10;
				margin: $submargin-width;
			}
		}

		.item:nth-child(2n) {
			margin-left: 20rpx;
		}
	}
	.more{
		text-align: center;
		margin-top: 30rpx;
	}
</style>